<style lang="less">
.dy-main.ExchangeRateHome{
  .exchange-item-box{
    color:#FFFFFF;
    width: 6.9rem;
    height: 3.6rem;
    margin: .2rem auto;
    border-radius: .06rem;
    box-sizing: border-box;
    padding: .34rem .5rem .53rem;
    &.backgroundEUR{
      background: linear-gradient(left,#7E97E0,#6C6ACB);
    }
    &.backgroundUSD{
      background: linear-gradient(left,#7E7EE0,#7F6BCB);
    }
    &.backgroundJPY{
      background: linear-gradient(left,#82ACD6,#6B7FCB);
    }
    &.backgroundHKD{
      background: linear-gradient(left,#7D96E0,#6D6CCB);
    }
    &.backgroundAUD{
      background: linear-gradient(left,#9B7AEF,#835DDC);
    }
    &.backgroundGBP{
      background: linear-gradient(left,#B2DB94,#8CC085);
    }
    .exchange-top{
      height: .8rem;
      >p{
        height: .8rem;
        line-height: .8rem;
        float: left;
      }
      .exchange-top-icon{
        width: .8rem;
        border-radius:50%;
        text-align: center;
        background-color: #97ABE6;
        >img{
          display: inline-block;
          width: .38rem;
          height: .48rem;
          margin-top: .17rem;
        }
      }
      .exchange-top-type{
        width: 3rem;
        height: .8rem;
        font-size: .3rem;
        font-weight: bold;
        padding-left: .21rem;
      }
      .exchange-top-rate{
        font-size: .24rem;
        >span{
          font-size: .28rem;
        }
      }
    }
    .exchange-middle{
      height: .58rem;
      width: 100%;
      margin-top: .48rem;
      margin-bottom: .57rem;
      display: flex;
      >div{
        flex: 1;
        border-left:1px solid #FFFFFF;
        >p{
          height: .23rem;
          line-height: .23rem;
        }
        >p:nth-of-type(1){
          font-size: .3rem;
        }
        >p:nth-of-type(2){
          font-size: .24rem;
          margin-top: .13rem;
        }
      }
    }
    .exchange-bottom{
      >div{
        width: .8rem;
        height: .4rem;
        border-radius: .2rem;
        border: 1px solid #FFFFFF;
        text-align: center;
        float: right;
      }
      >div:nth-of-type(1){
        margin-left: .32rem;
      }
    }
  }
}
</style>
<template>
  <div class="dy-main ExchangeRateHome">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">结售汇
        <div slot="right" @click="gotoNext('TradeDetail')">交易明细</div>
      </x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x style="height:100%;">
          <div class="scroller-box">
            <div v-for="(item, index) in lists" :key="index">
              <div class="exchange-item-box" :class="'background' + item.curryType">
                <div class="exchange-top">
                  <!-- <p class="exchange-top-icon"><img :src="`../../assets/img/Exchange/icon${item.curryType}.png`"/>{{ item.curryType }}</p> -->
                  <p class="exchange-top-icon"><img :src="item.iconUrl"/></p>
                  <p class="exchange-top-type">{{ item.currency }}{{ item.curryType }}</p>
                  <p class="exchange-top-rate">中间价<span>{{ item.middleRate }}</span></p>
                </div>
                <div class="exchange-middle">
                  <div>
                    <p>{{ item.billBuy }}</p>
                    <p>钞买价</p>
                  </div>
                  <div>
                    <p>{{ item.billSell }}</p>
                    <p>钞卖价</p>
                  </div>
                  <div>
                    <p>{{ item.remitSell }}</p>
                    <p>汇卖价</p>
                  </div>
                  <div>
                    <p>{{ item.remitBuy }}</p>
                    <p>汇买价</p>
                  </div>
                </div>
                <div class="exchange-bottom">
                  <div @click="gotoNext('SettleExchangePrepare')" v-if="item.billType === '1'">结汇</div>
                  <div @click="gotoNext('BuyExchange')" v-if="item.remitType === '1'">购汇</div>
                </div>
              </div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
import EUR from '../../assets/img/Exchange/iconEUR.png'
import USD from '../../assets/img/Exchange/iconUSD.png'
import JPY from '../../assets/img/Exchange/iconJPY.png'
import HKD from '../../assets/img/Exchange/iconHKD.png'
import AUD from '../../assets/img/Exchange/iconAUD.png'
import GBP from '../../assets/img/Exchange/iconGBP.png'
export default {
  mounted () {
  },
  data () {
    return {
      lists: [
        {curryType: 'EUR', iconUrl: EUR, currency: '欧元', middleRate: '115.00', billBuy: '123', billSell: '678', remitSell: '987', remitBuy: '679', billType: '1', remitType: '1'},
        {curryType: 'USD', iconUrl: USD, currency: '美元', middleRate: '116.00', billBuy: '124', billSell: '679', remitSell: '986', remitBuy: '671', billType: '1', remitType: '1'},
        {curryType: 'JPY', iconUrl: JPY, currency: '日元', middleRate: '113.00', billBuy: '125', billSell: '671', remitSell: '985', remitBuy: '672', billType: '1', remitType: '1'},
        {curryType: 'HKD', iconUrl: HKD, currency: '港币', middleRate: '117.00', billBuy: '126', billSell: '672', remitSell: '984', remitBuy: '673', billType: '1', remitType: '1'},
        {curryType: 'AUD', iconUrl: AUD, currency: '澳元', middleRate: '119.00', billBuy: '127', billSell: '673', remitSell: '983', remitBuy: '674', billType: '1', remitType: '1'},
        {curryType: 'GBP', iconUrl: GBP, currency: '英镑', middleRate: '146.00', billBuy: '128', billSell: '674', remitSell: '982', remitBuy: '675', billType: '1', remitType: '1'}
      ],
      accNoNm: '1'// 用户是否加挂借记卡和外币账户
    }
  },
  computed: {
    classObject (TYPE) {
      return {
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    onShow () {
      alert('hij')
    },
    gotoNext (type) {
      if (type === 'TradeDetail') {
        if (this.accNoNm === '0') {
          this.$router.push({path: 'ExchangeRateEntrance'})
        } else {
          this.$router.push({path: 'ExchangeTradeDetailList'})
        }
      } else if (type === 'SettleExchangePrepare') {
        this.$router.push({path: 'SettleExchangePrepare'})
      } else if (type === 'BuyExchange') {
        if (this.accNoNm === '0') {
          this.$router.push({path: 'ExchangeRateEntrance'})
          // this.$router.push({path: 'BuyExchangeRiskWaringLetter'})
        } else {
          this.$router.push({path: 'BuyExchangePrepare'})
        }
      }
    },
    refreshTest () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'M0401010', 'basic_Data': {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.prdList = response.data.data
          } else {
            LVm.aaa = response.data.data
          }
        }
      )
      // this.$router.push({name: 'FinancialBuySure', query: {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}})
    }
  },
  created () {
    this.refreshTest()
  },
  watch: {
  }
}
</script>
